import { guid } from "@/utils";

import { edgeOptions, nodeOptions } from "./state";
import G6 from "@antv/g6";

// @ts-ignore
import fonts from "@/assets/icons/iconfont.json";

const icons = fonts.glyphs.map((icon) => {
  return {
    name: icon.name,
    unicode: String.fromCodePoint(icon.unicode_decimal), // `\\u${icon.unicode}`,
  };
});
export const getIcon = (type: string) => {
  const matchIcon = icons.find((icon) => {
    return icon.name === type;
  }) || { unicode: "", name: "default" };
  return matchIcon.unicode;
};

const deelNodeProp = (item) => {
  return item.objType == "1"
    ? item.propertyDTOList.map((item) => {
        item.visible = false;
        return item;
      })
    : item.propertyDTOList?.map((item, index) => {
        if (index == 0) {
          item.isDisable = true;
        }
        item.visible = false;
        return item;
      });
};

//处理初始化节点
export const deelNode = (data) => {
  data.edges = data.edges.map((item) => {
    return {
      id: item.id,
      source: item.srcId,
      target: item.dstId,
      label: fittingString(item.name, 120, 14),
      labelName: item.name,
      propertyDTOList: deelNodeProp(item) || [],
      defaultName: item.defaultName,
      defaultNameCode: item.defaultNameCode,
      objType: item.objType || "2",
      code: item.code || "",
      stateStyles: edgeOptions(),
      type: item.srcId === item.dstId ? "loop" : "line",
    };
  });
  data.nodes = data.nodes.map((item) => {
    return {
      id: item.id,
      label: fittingString(item.name, 120, 14),
      labelName: item.name,
      objType: item.objType || "1",
      type: item.icon ? "iconfont" : "circle",
      x: item.displayX,
      y: item.displayY,
      icon: item.icon,
      propertyDTOList: deelNodeProp(item) || [],
      defaultName: item.defaultName || "",
      defaultNameCode: item.defaultNameCode || "",
      code: item.code || "",
      text: item.icon ? getIcon(item.icon) : "",
      //节点样式
      style: {
        fill: item.backgroundColor,
      },
      //节点文字样式
      labelCfg: {
        style: {
          fill: item.backgroundColor,
        },
      },
      //节点交互事件
      stateStyles: nodeOptions(item),
    };
  });
  return data;
};

//处理提交节点
export const deelSubmitData = (graphData, layout) => {
  graphData.edges =
    graphData?.edges.map((item) => {
      return {
        id: item?.id?.includes("edge") ? guid() : item.id,
        srcId: item.source,
        dstId: item.target,
        name: item.labelName,
        propertyDTOList: item.propertyDTOList || [],
        //同后端商议，如果选择是唯一标识，则传空字符
        defaultName: item.defaultName,
        defaultNameCode: item.defaultNameCode,
        code: item.code,
      };
    }) || [];
  graphData.nodes =
    graphData?.nodes.map((item) => {
      return {
        id: item.id,
        name: item.labelName,
        objType: item.objType || "1",
        displayX: item.x,
        displayY: item.y,
        backgroundColor: item.style?.fill,
        icon: item.icon,
        propertyDTOList: item.propertyDTOList || [],
        defaultName: item.defaultName === "_vid" ? "" : item.defaultName || "",
        defaultNameCode: item.defaultNameCode || "",
        code: item.code || "",
      };
    }) || [];
  graphData.combos && delete graphData.combos;
  graphData.modelInfo = { shape: layout || "gForce" };
  return graphData;
};

export const fittingString = (str, maxWidth, fontSize) => {
  const ellipsis = "...";
  const ellipsisLength = G6.Util.getTextSize(ellipsis, fontSize)[0];
  let currentWidth = 0;
  let res = str;
  const pattern = new RegExp("[\u4E00-\u9FA5]+"); // distinguish the Chinese charactors and letters
  str.split("").forEach((letter, i) => {
    if (currentWidth > maxWidth - ellipsisLength) return;
    if (pattern.test(letter)) {
      // Chinese charactors
      currentWidth += fontSize;
    } else {
      // get the width of single letter according to the fontSize
      currentWidth += G6.Util.getLetterWidth(letter, fontSize);
    }
    if (currentWidth > maxWidth - ellipsisLength) {
      res = `${str.substr(0, i)}${ellipsis}`;
    }
  });
  return res;
};
